<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Author" content="cjw">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
  <style>
	*{margin: 0; padding: 0;}
	/* S - 订单 */
	.order i{display: block; width: 16px; height: 16px;}
	.order img{display: block;}
	.order{width:680px; color:#ccc; padding:5px; border:1px solid #ddd; font-size:12px; margin:20px auto; overflow:hidden;}
	.order .top{height: 25px;}
	.order .con{}
	.order .con ul li{list-style-type:none; border:1px solid #ddd; padding:6px; margin-top:2px;}
	.order .con ul li .busi_name{height:22px; font-size:14px; font-weight:bold;}
	.order .con ul li table{}
	.order .con ul li table tbody tr{}
	.order .con ul li table tbody tr td{text-align: center; width:126px; color:#ccc;     padding: 2px; border-bottom:1px solid #ddd; border-right:1px solid #ddd;}

	.order .con ul li table tbody tr:nth-child(1) td{border-top:1px solid #ddd;}
	.order .con ul li table tbody tr td:nth-child(1){width:100px; border-left:1px solid #ddd; }
	.order .con ul li table tbody tr td:nth-child(2){width:160px;}
	.order .con ul li table tbody tr td:nth-child(3){}
	.order .con ul li table tbody tr td:nth-child(4){}
	.order .con ul li table tbody tr td:nth-child(5){}
	.order .con ul li table tbody .busi_name td{text-align:left; height:20px; padding-left:3px; border-top:1px solid #ddd;}
	.order .con ul li .li_bom{height:16px; overflow:hidden;} /*16px;46px;*/
	.order .con ul li .li_bom .order_state{height:16px;}
	.order .con ul li .li_bom .order_state label{float:right;}
	.sure_logistics:hover, .label_logistics:hover{color:#555; cursor:pointer;}
	.order .con ul li .li_bom .order_logistics{height:18px; background:#f6f4f0; 
	padding:6px; }
	.order .order_logistics label{display:block; float:left;}
	.order .order_logistics label:nth-child(2){width:24px; height:1px; margin-left: 10px;}

	.order .order_logistics .sure_order{float:right; width:60px; height:18px; text-align:center; color:#fff; border-radius:4px; background:#e6b981; cursor:pointer;}
	.order .order_logistics .sure_order:hover{background:#f58536}

	.order .bom{}
	.order .bom .money_space,.money,.original_money{float:right;}
	/* E - 订单 */
  </style>
 </head>
 <body>
						<div class="order">
							<div class="top">
								<label>订单编号：0000</label>
								<label>时间：2017-12-26 18:55</label>
							</div>
							<div class="con">
								<ul>
									<!--商家-->
									<li>
										<!--
										<div class="busi_name">
											<label style="text-align:none;">tako小衣店</label>
										</div>
										-->
										<table cellspacing="0" cellpadding="0">
											<tbody>
												<!--
												<tr class="busi_name">
													<td colspan="5">
														<label style="text-align:none;">tako小衣店</label>
													</td>
												</tr>
												-->
												<!--单个商品-->
												<tr>
													<td><img src="C:\Users\win7\Desktop\tako\tako3.jpg" width="100px" height="110px" alt="" /></td>
													<td class="goods_name">tako粉衣</td>
													<td class="goods_color">大粉</td>
													<td class="goods_size">L</td>
													<td class="goods_count">2</td>
													<td class="goods_price">
														<label class="orig_price"><del>120元</del></label>
														<label class="price">120元<label>
													</td>
												</tr>
												<tr>
													<td><img src="C:\Users\win7\Desktop\tako\tako5.jpg" width="100px" height="110px" alt="" /></td>
													<td class="goods_name">tako粉衣</td>
													<td class="goods_color">大粉</td>
													<td class="goods_size">L</td>
													<td class="goods_count">2</td>
													<td class="goods_price">120元</td>
												</tr>
											</tbody>
										</table>
										<div class="li_bom">
											<div class="order_state">
												
												<!--
												等待确认发货-->
												<label>&nbsp;&nbsp;&nbsp;&nbsp;</label>
												<label class="sure_logistics">进行发货确认</label>
												<label>&nbsp;&nbsp;&nbsp;&nbsp;</label>
												<label>等待确认</label>
												
												
												<!--
												发货中
												<label>&nbsp;&nbsp;&nbsp;&nbsp;</label>
												<label class="label_logistics">查看物流信息</label>
												<label>&nbsp;&nbsp;&nbsp;&nbsp;</label>
												<label>正在发货</label>
												<div style="clear:both;"></div>
												-->
												<!--
												确认收货
												<label>&nbsp;&nbsp;&nbsp;&nbsp;</label>
												<label class="label_logistics">查看物流信息</label>
												<label>&nbsp;&nbsp;&nbsp;&nbsp;</label>
												<label>订单完成</label>-->
												
											</div>
											<div class="order_logistics">
												<label class="ship_address" data-id="">广东省 广州市 广东白云学院&nbsp;(发货地址)</label>
												<label><i style="background:url(image/to.png);"></i></label>
												<label class="receiv_address" data-id="">广西省 北海市 贵海花园一期&nbsp;(收货地址)</label>
												<label class="sure_order" style="">确认发货</label>
											</div>
										</div>
									</li>
								</ul>
							</div>
							<div class="bom">&nbsp;
								<label class="money_space">&nbsp;&nbsp;</label>
								<label class="money">金额：200元</label>
								<label class="money_space">&nbsp;&nbsp;</label>
								<label class="original_money">
									<del style="font-size:6px;">原价：200元</del>
								</label>
							</div>
							<div style="clear:both;"></div>
						</div>
	<script src="js/Order_Mudle.js"></script>
	<script src="js/MyjsV0-3.js"></script>
	<script>
	
	//进行发货确认 $(".sure_logistics")[0]

	var orderData = new JSONObject() ;		//订单信息
	orderData.put("id", "0000") ;
	orderData.put("time", "2017-12-26 18:55") ;
	orderData.put("money", "10000") ;
	
	//Business:
	var BusinessData = new JSONObject() ;	//商家信息
	BusinessData.put("storeName", "衣品之家") ;
	BusinessData.put("progressState", true) ;
	
	var LogisticsData = new JSONObject() ;	
	LogisticsData.put("shipAddress", "广东省-广州市-广东白云学院") ;//商户地址信息
	LogisticsData.put("receiptAddress", "广西省-北海市-贵海花园一期") ;//客户地址信息
	BusinessData.put("logistics", LogisticsData) ;  //商家信息中收集物流信息
	//Goods:
	var GoodsData1 = new JSONObject() ;		//商品信息
	GoodsData1.put("id", "0001") ;
	GoodsData1.put("path", "C:/Users/win7/Desktop/tako/tako5.jpg") ;
	GoodsData1.put("name", "好看的上衣") ;
	GoodsData1.put("price", "50") ;
	GoodsData1.put("color", "粉红") ;
	GoodsData1.put("count", "2") ;
	var GoodsData2 = new JSONObject() ;		//商品信息
	GoodsData2.put("id", "0002") ;
	GoodsData2.put("path", "C:/Users/win7/Desktop/tako/tako5.jpg") ;
	GoodsData2.put("name", "好看的上衣2") ;
	GoodsData2.put("price", "280") ;
	GoodsData2.put("color", "粉红") ;
	GoodsData2.put("count", "3") ;

	var of = new OrderFactory_1() ;
	var orderObject = of.createOrder(orderData) ;
	var busiObject = of.createBusinessMange(BusinessData) ;
	var goods1 = of.createGoods(GoodsData1) ;
	var goods2 = of.createGoods(GoodsData2) ;

	busiObject.add(goods1) ;
	busiObject.add(goods2) ;
	orderObject.add(busiObject) ;

	console.log(orderObject.makeHTML()) ;

	//商铺中的订单样式修改代码
	var orders = $(".order") ;
	for(var i = 0; i < orders.length; i ++){
		orders[i].$("li")[0].css("border:none; padding:0;", false) ;
		orders[i].css("width:720px;", false) ;
	}


	</script>
 </body>
</html>